<template>
  <div class="dashboard">
    <!-- 顶部欢迎信息 -->
    <div class="welcome-section">
      <h2>{{ greeting }}，{{ username }}，欢迎使用快营销主营系统</h2>
    </div>

    <!-- 顶部统计卡片区域：前两个大卡片（带环形图，数字居中），右侧两个上下堆叠，宽度比例65%:35% -->
    <div class="top-stats-flex2">
      <!-- 左侧两个大卡片 -->
      <div class="stats-left">
        <div class="stat-card big-card">
          <div class="stat-title">活动数量</div>
          <div class="ring-center-box">
            <div ref="activityChartRef" class="activity-chart-single"></div>
            <div class="ring-center-text">
              <div class="ring-main">268</div>
              <div class="ring-label">活动报名</div>
            </div>
          </div>
          <div class="stat-legend">
            <span class="legend-dot legend-blue"></span>活动报名
            <span class="legend-dot legend-cyan"></span>抢优惠
          </div>
        </div>
        <div class="stat-card big-card">
          <div class="stat-title">活动数量</div>
          <div class="ring-center-box">
            <div ref="statusChartRef" class="activity-chart-single"></div>
            <div class="ring-center-text">
              <div class="ring-main">16</div>
              <div class="ring-label">进行中</div>
            </div>
          </div>
          <div class="stat-legend status-legend">
            <span><span class="legend-dot legend-gray"></span>未开始</span>
            <span><span class="legend-dot legend-green"></span>进行中</span>
            <span><span class="legend-dot legend-blue"></span>已完成</span>
          </div>
        </div>
      </div>
      <!-- 右侧两个上下堆叠小卡片 -->
      <div class="stats-right">
        <div class="stat-card small-card">
          <div class="stat-title">累计活动参与人数</div>
          <div class="stat-value big">872,501</div>
        </div>
        <div class="stat-card small-card">
          <div class="stat-title">累计活动收款数</div>
          <div class="stat-value big">814,794.00</div>
        </div>
      </div>
    </div>

    <!-- 中间两组TOP10排名 -->
    <el-row :gutter="20" class="rank-row">
      <el-col :span="12">
        <el-card class="rank-card" shadow="hover">
          <div class="rank-title">活动参与人数排名</div>
          <ul class="rank-list">
            <li v-for="(item, idx) in rankList1" :key="idx" :class="['rank-item', { top3: idx < 3 }]">
              <span class="rank-index" :class="{ top1: idx === 0, top2: idx === 1, top3: idx === 2 }">{{ idx + 1 }}</span>
              <span class="rank-name">{{ item.name }}</span>
              <span class="rank-value">{{ item.value }}</span>
            </li>
          </ul>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="rank-card" shadow="hover">
          <div class="rank-title">活动收款金额排名</div>
          <ul class="rank-list">
            <li v-for="(item, idx) in rankList2" :key="idx" :class="['rank-item', { top3: idx < 3 }]">
              <span class="rank-index" :class="{ top1: idx === 0, top2: idx === 1, top3: idx === 2 }">{{ idx + 1 }}</span>
              <span class="rank-name">{{ item.name }}</span>
              <span class="rank-value">{{ item.value }}</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

    <!-- 收支明细表格 -->
    <el-card class="transaction-card" shadow="hover">
      <div class="transaction-header">
        <span>收支明细表</span>
        <el-link type="primary" style="float: right; font-size: 14px" :underline="false">查看更多</el-link>
      </div>
      <el-table :data="tableData2" style="width: 100%" size="small" border :header-cell-style="{background: '#f8f8f9', color: '#333', fontWeight: 'bold'}">
        <el-table-column prop="no" label="流水号" width="90" align="center" />
        <el-table-column prop="name" label="昵称" width="90" align="center" />
        <el-table-column prop="phone" label="手机号" width="120" align="center" />
        <el-table-column prop="amount" label="金额(元)" width="100" align="right">
          <template #default="scope">
            <span :style="{color: scope.row.amount > 0 ? '#67C23A' : '#F56C6C', fontWeight: 'bold'}">
              {{ scope.row.amount > 0 ? '+' : '' }}{{ scope.row.amount }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="balance" label="余额(元)" width="100" align="right" />
        <el-table-column prop="company" label="归属企业" min-width="160" align="left" show-overflow-tooltip />
        <el-table-column prop="type" label="收支类型" width="110" align="center" />
        <el-table-column prop="date" label="创建时间" width="150" align="center" />
        <el-table-column label="操作" width="70" align="center">
          <template #default>
            <el-link type="primary" :underline="false">查看</el-link>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const username = ref('陈添添')
const greeting = ref('上午好')

// 图表ref
const activityChartRef = ref()
const statusChartRef = ref()

// 图表静态数据（后续可对接接口）
const activityData = [
  { value: 188, name: '活动报名', color: '#2066FF' },
  { value: 80, name: '抢优惠', color: '#1DE9B6' }
]
const statusData = [
  { value: 120, name: '未开始', color: '#E5E9F2' },
  { value: 16, name: '进行中', color: '#67C23A' },
  { value: 132, name: '已完成', color: '#2066FF' }
]

// //搜索表单对象
//
//分页组件
// const pagination = ref<PaginationParam>({ currentPage: 1, pageSize: 5, total: 0 })
// let searchEmp = ref<SearchEmpModel>({ begin: '', end: '', date: [], name: '', gender: '' })
// //列表展示数据
// let tableData = ref<EmpModelArray>([])
// //分页条件查询
// const queryPage = async () => {
//   const result = await queryPageApi(
//     searchEmp.value.begin,
//     searchEmp.value.end,
//     searchEmp.value.gender,
//     searchEmp.value.name,
//     pagination.value.currentPage,
//     pagination.value.pageSize
//   )

//   if (result.code) {
//     tableData.value = result.data.rows
//     pagination.value.total = result.data.total
//   }
// }
// 排行榜数据
const rankList1 = [
  { name: '活动A', value: '8,000' },
  { name: '活动B', value: '7,000' },
  { name: '活动C', value: '6,500' },
  { name: '活动D', value: '5,500' },
  { name: '活动E', value: '5,300' },
  { name: '活动F', value: '5,000' },
  { name: '活动G', value: '4,800' },
  { name: '活动H', value: '4,300' },
  { name: '活动I', value: '3,800' },
  { name: '活动J', value: '3,600' }
]
const rankList2 = [
  { name: '活动A', value: '8,000.00' },
  { name: '活动B', value: '7,000.00' },
  { name: '活动C', value: '6,500.00' },
  { name: '活动D', value: '5,500.00' },
  { name: '活动E', value: '5,300.00' },
  { name: '活动F', value: '5,000.00' },
  { name: '活动G', value: '4,800.00' },
  { name: '活动H', value: '4,300.00' },
  { name: '活动I', value: '3,800.00' },
  { name: '活动J', value: '3,600.00' }
]
// 收支明细表格数据
const tableData2 = [
  { no: '65714', name: '黄晓琪', phone: '1735796105', amount: 500, balance: 2000, company: '浙江驰骋智慧科技有限公司', type: '收入-活动报名', date: '2020/09/07 23:59' },
  { no: '65713', name: '王敏', phone: '17357961054', amount: 500, balance: 1000, company: '金华十牛智慧科技有限公司', type: '收入-活动报名', date: '2020/09/07 23:59' },
  { no: '65712', name: '-', phone: '-', amount: -500, balance: 1400, company: '金华十牛智慧科技有限公司', type: '支出-退款', date: '2020/09/07 23:59' },
  { no: '65711', name: '-', phone: '-', amount: -500, balance: 1900, company: '金华十牛智慧科技有限公司', type: '支出-退款', date: '2020/09/07 23:59' },
  { no: '65710', name: '别明', phone: '17357961051', amount: 500, balance: 2000, company: '杭州博望控股集团有限公司', type: '收入-活动报名', date: '2020/09/07 23:59' },
  { no: '65709', name: '袁亮', phone: '15757179146', amount: 500, balance: 2000, company: '杭州博望控股集团有限公司', type: '收入-活动报名', date: '2020/09/07 23:59' },
  { no: '65708', name: '李涛', phone: '15757179146', amount: 500, balance: 2000, company: '杭州博望控股集团有限公司', type: '收入-活动报名', date: '2020/09/07 23:59' },
  { no: '65707', name: '李涛', phone: '15757179143', amount: 500, balance: 2000, company: '杭州博望控股集团有限公司', type: '收入-活动报名', date: '2020/09/07 23:59' },
  { no: '65706', name: '马旭超', phone: '15757179143', amount: 500, balance: 2000, company: '浙江百富管理有限公司', type: '收入-活动报名', date: '2020/09/07 23:59' }
]

// 生命周期钩子
onMounted(() => {
  nextTick(() => {
    loadActivityChart()
    loadStatusChart()
  })
  window.addEventListener('resize', resizeCharts)
})

// 图表初始化函数
function loadActivityChart() {
  if (!activityChartRef.value) return
  const chart = echarts.init(activityChartRef.value)
  chart.setOption({
    series: [
      // 外圈装饰圆环
      {
        type: 'pie',
        radius: ['94%', '100%'],
        silent: true,
        label: { show: false },
        hoverAnimation: false,
        z: 1,
        data: [
          {
            value: 1,
            itemStyle: {
              color: '#e5e9f2' // 外圈颜色，可自定义
            }
          }
        ]
      },
      // 主环形图
      {
        type: 'pie',
        radius: ['80%', '90%'],
        label: { show: false },
        z: 2,
        data: activityData.map(item => ({
          value: item.value,
          name: item.name,
          itemStyle: { color: item.color }
        }))
      }
    ]
  })
}

function loadStatusChart() {
  if (!statusChartRef.value) return
  const chart = echarts.init(statusChartRef.value)
  chart.setOption({
    series: [
      // 外圈装饰圆环
      {
        type: 'pie',
        radius: ['94%', '100%'],
        silent: true,
        label: { show: false },
        hoverAnimation: false,
        z: 1,
        data: [
          { value: 1, itemStyle: { color: '#e5e9f2' } }
        ]
      },
      // 主环形图
      {
        type: 'pie',
        radius: ['80%', '90%'],
        label: { show: false },
        z: 2,
        data: statusData.map(item => ({
          value: item.value,
          name: item.name,
          itemStyle: { color: item.color }
        }))
      }
    ]
  })
}

function resizeCharts() {
  if (activityChartRef.value) echarts.getInstanceByDom(activityChartRef.value)?.resize()
  if (statusChartRef.value) echarts.getInstanceByDom(statusChartRef.value)?.resize()
}
</script>

<style scoped>
.dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.welcome-section {
  margin-bottom: 20px;
  text-align: left;
}
.welcome-section h2 {
  margin: 0;
  font-size: 24px;
  color: #303133;
}
.top-stats-flex2 {
  display: flex;
  gap: 24px;
  margin-bottom: 20px;
}
.stats-left {
  display: flex;
  flex-direction: row;
  gap: 24px;
  width: 65%;
}
.stats-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 35%;
  justify-content: space-between;
}
.stat-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 18px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 170px;
}
.big-card {
  flex: 1;
  min-width: 0;
}
.small-card {
  min-height: 80px;
  justify-content: flex-start;
}
.ring-center-box {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 140px;
  height: 140px;
  margin: 0 32px 0 auto;
}
.activity-chart-single {
  width: 140px;
  height: 140px;
}
.ring-center-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.ring-main {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  line-height: 1.1;
}
.ring-label {
  font-size: 15px;
  color: #909399;
}
.stat-title {
  font-size: 16px;
  color: #909399;
  margin-bottom: 8px;
}
.stat-legend {
  margin-top: 8px;
  font-size: 13px;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 12px;
}
.legend-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: 4px;
}
.legend-blue {
  background: #2066ff;
}
.legend-cyan {
  background: #1de9b6;
}
.legend-gray {
  background: #e5e9f2;
}
.legend-green {
  background: #67c23a;
}
.stat-value.big {
  font-size: 28px;
  font-weight: bold;
  color: #303133;
  margin-top: 8px;
}
.rank-row {
  margin-bottom: 20px;
}
.rank-card {
  min-height: 340px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
}
.rank-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 10px 0 10px 10px;
  border-bottom: 1px solid #ebeef5;
}
.rank-list {
  list-style: none;
  padding: 0 10px;
  margin: 0;
}
.rank-item {
  display: flex;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 15px;
}
.rank-index {
  display: inline-block;
  width: 28px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  border-radius: 50%;
  background: #e5e9f2;
  color: #409eff;
  font-weight: bold;
  margin-right: 12px;
}
.rank-item.top3 .rank-index {
  background: #409eff;
  color: #fff;
}
.rank-item .rank-name {
  flex: 1;
  margin-right: 10px;
  font-weight: 500;
}
.rank-item .rank-value {
  min-width: 80px;
  text-align: right;
}
.transaction-card {
  width: 100%;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  padding: 0 0 10px 0;
}
.transaction-header {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  padding: 10px 16px 10px 16px;
  border-bottom: 1px solid #ebeef5;
  background: #f8f8f9;
}
:deep(.el-table th),
:deep(.el-table td) {
  padding: 8px 0;
}
/* 卡片二图例分三行 */
.stat-legend.status-legend {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
</style>
